<script setup lang="ts">
import { ref } from "vue"
import BreadcrumbItem from './BreadcrumbItem.vue'

const BreadcrumbList = ref([
  {
    title: '首页',
    path: '/path1',
    action: true
  }, {
    title: '货物信息管理',
    path: '/path2',
    action: false
  }, {
    title: '入库信息管理',
    path: '/path3',
    action: false
  }
])

const handleClose = (idx) => {
  BreadcrumbList.value.splice(idx, 1)
}

const handleClick = (idx) => {
  if(!BreadcrumbList.value[idx].action) {
    const ActionIdx = BreadcrumbList.value.findIndex(item => item.action)
    BreadcrumbList.value[ActionIdx].action = false
    BreadcrumbList.value[idx].action = true
  }
}
</script>

<template>
  <div class="breadcrumb">
    <el-tag
      class="breadcrumb-item"
      :closable="!item.action"
      :effect=" item.action ? 'dark' : 'plain'"
      v-for="(item, index) in BreadcrumbList"
      :key="`breadcrumb-${index}`"
      @close="handleClose(index)"
      @change="handleClick(index)"
    >{{ item.title }} </el-tag>
  </div>
</template>

<style lang="scss" scoped>
.breadcrumb {
  display: flex;
  padding: 2px 0;
  border-bottom: 1px solid #d8dce5;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12), 0 0 3px 0 rgba(0, 0, 0, 0.04);
  -webkit-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12), 0 0 3px 0 rgba(0, 0, 0, 0.04);
  &-item {
    margin-right: 5px;
  }
}
</style>